<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>店面自营护理管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		.detail{
			width:340px;min-height:100px;word-wrap:break-word;
		}
	</style>
	<script type="text/javascript">
		global.loginPassword = "${fns:getLoginPw()}";
		$(document).ready(function() {
			$("#contentTable tbody tr").click(function(){
				$("#contentTable tbody tr").removeClass("select_active");
				$(this).addClass("select_active");
				var detail = $("#detail-" +this.id).html();
				var name = $("#name-" +this.id).html();
				$("#popupDialog h3 font").html(name);
				$("#popupDialog .detail").html(detail);
				$('#popupDialog').popup('open');
			});
			var currentId = '${currentId}';
			if(currentId == ''){
				$("#contentTable tbody tr:first-child").addClass("select_active");
			} else {
				$("#tr-" + currentId).addClass("select_active");
			}
			$(".operateTD").click(function(){
				operateMenu(this.id);
			});
		});
		function operateMenu(id){
			var type = '${type}';
			item = $("#opreation-"+ id);
			if(item.length > 0) {
				$(".ui-icon-arrow-u").removeClass("ui-icon-arrow-u").addClass("ui-icon-arrow-d");
				item.remove();
				this.event.stopPropagation();
				return;
			}
			$("#"+id + " .ui-icon-arrow-d").removeClass("ui-icon-arrow-d").addClass("ui-icon-arrow-u");
			$(".opreation").remove();
			var html= "<tr id='opreation-" + id + "' class='opreation'><td colspan='6'>";
				html += '<a data-role="button" data-inline="true" href="${ctx}/base/storeSelfCare/form?id=' + id + '">修改</a>';
				html += '<a data-role="button" data-inline="true" href="${ctx}/base/storeSelfCare/delete?id=' + id + '" onclick="return confirmx(\'确认要删除该店面自营护理吗？\', this.href)">删除</a>';
				html += '</td></tr>';
			$("#tr-" + id).after(html);
			$("#contentTable").trigger("create");
			this.event.stopPropagation();
		}
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<nav data-role="navbar">
	    <ul>
	        <li><a href="${ctx}/expert/care/">系统护理</a></li>
	        <li><a href="${ctx}/base/storeSelfCare/" class="ui-btn-active">店面自营护理</a></li>
	    </ul>
	</nav>
	<div class="icon-buttons">
		<input type="button" class="leave-clean-session" data-inline="true" data-icon="back" data-iconpos="notext" value="返回"/>
	</div>
	<form:form id="searchForm" modelAttribute="storeSelfCare" action="${ctx}/base/storeSelfCare/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<input type="button" value="店面护理添加" data-inline="true" onclick="loginPasswordPopup('${ctx}/base/storeSelfCare/form')">
		<label>按护理名字查询：</label>
		<input id="careName" name="careName" type="search" value="${careName}"/>
		<input id="btnSubmit" type="submit" value="查询" data-inline="true"/>
	</form:form>
	<tags:message content="${message}"/>
	<table id="contentTable" data-role="table" class="ui-responsive table-stroke">
		<thead><tr><th>名称</th><th>护理间隔</th><th>护理次数</th><th>护理类型</th><th>零售价</th><th>操作</th></tr></thead>
		<tbody>
		<c:forEach items="${page.list}" var="storeSelfCare">
			<tr id="tr-${storeSelfCare.id}">
				<td><font id="name-tr-${storeSelfCare.id}">${storeSelfCare.name}</font></td>
				<td>${fns:getDictLabel(storeSelfCare.duration, 'care_duration', '')}</td>
				<td>${storeSelfCare.times}次</td>
				<td>${storeSelfCare.price}</td>
				<td>${fns:getDictLabel(storeSelfCare.type, 'care_type', '')}</td>
				<font style="display:none;" id="detail-tr-${storeSelfCare.id}">${storeSelfCare.description}</font>
				<td class="operateTD" id="${storeSelfCare.id}">
					<input type="button" data-inline="true" data-icon="arrow-d" data-iconpos="notext">
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
	
	<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;" class="ui-corner-all">
	    <div data-role="header" data-theme="a" class="ui-corner-top">
	        <h1>护理明细</h1>
	    </div>
	    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
	    	<h3>当前护理：<font></font></h3>
	    	<h3>护理明细：</h3>
	    	<p class="detail"></p>
	        <a href="#" data-role="button" data-rel="back" data-theme="c">关闭</a>
	    </div>
    </div>
</body>
</html>
